<template>
  <div>
    <el-card class="sku-list">
      <el-table
        :data='skuInfo'
        border
        style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="width">
        </el-table-column>
        <el-table-column
          label="名称"
          prop="skuName"
          width="width">
        </el-table-column>
        <el-table-column
          label="描述"
          prop="skuDesc"
          width="width">
        </el-table-column>
        <el-table-column
          label="默认图片"
          width="width">
          <template v-slot='{row}'>
            <el-image
            style="width: 100px; height: 100px"
            :src="row.skuDefaultImg"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column
          label="重量(KG)"
          prop="weight"
          width="width">
        </el-table-column>
        <el-table-column
          label="价格(元)"
          prop="price"
          width="width">
        </el-table-column>
         <el-table-column
          label="操作"
          width="300">
          <template v-slot='{row}'>
            <Hintbutton title="上架" type='info' icon='el-icon-top' size='mini' v-if="row.isSale==0" @click='onSale(row)'></Hintbutton>
            <Hintbutton title="下架" type='success' icon='el-icon-bottom' size='mini' v-if="row.isSale==1" @click='cancelSale(row)'></Hintbutton>
            <Hintbutton title="修改" type='primary' icon='el-icon-edit' size='mini'></Hintbutton>
            <Hintbutton title="查看详情" type='info' icon='el-icon-info' size='mini' @click='showSkuInfo(row.id)'></Hintbutton>
            <el-popconfirm
                :title="`确定删除${row.skuName}吗？`"
                @onConfirm='delSku(row.id)'
            >
                <Hintbutton title="删除" type='danger' icon='el-icon-delete' size='mini' slot="reference" style="margin-left:10px"></Hintbutton>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        style="margin-top:10px"
        align='center'
        :current-page.sync="currentPage"
        :page-sizes="[5, 7, 9]"
        :page-size="limit"
        layout="prev, pager, next, jumper, ->, sizes, total"
        :total="total">
    </el-pagination>
    <el-drawer
      :visible.sync="isShowDrawer"
      :with-header="false"
      size="50%">
      <el-row>
        <el-col :span="5">名称</el-col>
        <el-col :span="15">{{skuInfoList.skuName}}</el-col>
      </el-row>
      <el-row>
        <el-col :span="5">描述</el-col>
        <el-col :span="15">{{skuInfoList.skuDesc}}</el-col>
      </el-row>
      <el-row>
        <el-col :span="5">价格</el-col>
        <el-col :span="15">{{skuInfoList.price}}</el-col>
      </el-row>
      <el-row>
        <el-col :span="5">平台属性</el-col>
        <el-col :span="15">
          <el-tag type="success" v-for="item in skuInfoList.skuAttrValueList" :key="item.id"
          style="margin:0 5px">{{item.attrName}}:{{item.valueName}}
          </el-tag>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">销售属性</el-col>
        <el-col :span="15">
          <div v-if="!skuInfoList.skuSaleAttrValueList">无</div>
          <el-tag type="success" v-else v-for="item in skuInfoList.skuSaleAttrValueList" :key="item.id">
            {{item.attrName}}:{{item.valueName}}
          </el-tag>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">商品图片</el-col>
        <el-col :span="15">
           <el-carousel  trigger="click" height="400px" class="sku-carousel">
              <el-carousel-item v-for="item in skuInfoList.skuImageList" :key="item.id">
                <img :src="item.imgUrl">
              </el-carousel-item>
            </el-carousel>
        </el-col>
      </el-row>
     </el-drawer>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'SkuList',
  data(){
    return{
      skuInfo:[],
      limit:5,
      currentPage:1,
      total:0,
      isShowDrawer:false,
      skuInfoList:{}
    }
  },
  methods:{
    async onSale(row){
      if(row.hasOwnProperty('isSale')){
        row.isSale=1
      }else{
        this.$set(row,'isSale',1)
      }
      await this.$api.sku.onSale(row.id)
      this.$message.success('上架成功')
      this.getSkuInfo()
    },
    async cancelSale(row){
      if(row.hasOwnProperty('isSale')){
        row.isSale=0
      }else{
        this.$set(row,'isSale',0)
      }
      await this.$api.sku.cancelSale(row.id)
      this.$message.success('下架成功')
      this.getSkuInfo()
    },
    async delSku(id){
      await this.$api.sku.remove(id)
      this.getSkuInfo()
    },
    async showSkuInfo(id){
      const {data}=await this.$api.sku.getList(id)
      console.log(data);
      this.skuInfoList=data
      this.isShowDrawer=true
    },
    handleSizeChange(pageSize){
      this.limit=pageSize
      this.getSkuInfo()
    },
    handleCurrentChange(currentPage){
      this.currentPage=currentPage
      this.getSkuInfo(currentPage)
    },
    async getSkuInfo(page=1){
      this.currentPage=page
      const {data}=await this.$api.sku.getSkuList(page,this.limit)
      const {records,total}=data
      this.skuInfo=records
      this.total=total
    }
  },
  mounted(){
    this.getSkuInfo()
  }
}
</script>

<style lang="scss" scoped>
  .sku-list {
    .el-row {
      height: 40px;
      .el-col {
        line-height: 40px;
        &.el-col-5 {
          font-size: 18px;
          font-weight: bold;
          text-align: right;
          margin-right: 20px;
        }
      }
    }

    ::v-deep.el-drawer__body {
      overflow: auto;
      &::-webkit-scrollbar {
        display: none;
      }

      .sku-carousel {
        width: 400px;
        border: 1px solid #ccc;
        img {
          width: 400px;
          height: 400px;
        }

        .el-carousel__indicator {
          button {
            background-color: pink;
          }
          &.is-active {
            button {
              background-color: cyan;
            }
          }
        }
      }
    }

    
  }

</style>
